<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="spu名称">
        <span>{{ spu.spuName }}</span>
      </el-form-item>
      <el-form-item label="sku名称">
        <el-input placeholder="sku名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>

      <el-form-item label="价格(元)">
        <el-input
          placeholder="价格(元)"
          type="number"
          v-model="skuInfo.price"
        ></el-input>
      </el-form-item>

      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
      </el-form-item>

      <el-form-item label="规格描述">
        <el-input type="textarea" roes="4" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>

      <el-form-item label="平台属性">
        <el-form :inline="true" ref="form" label-width="100px">
          <el-form-item
            :label="attr.attrName"
            v-for="(attr, index) in attrInfoList"
            :key="attr.id"
          >
            <el-select placeholder="请选择" v-model="attr.attrIdAndAttrValueId">
              <el-option
                :label="attrValue.valueName"
                :value="`${attr.id}:${attrValue.id}`"
                v-for="(attrValue, index) in attr.attrValueList"
                :key="attrValue.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form :inline="true" ref="form" label-width="100px">
          <el-form-item
            :label="sale.saleAttrName"
            v-for="(sale, index) in saleAttrList"
            :key="sale.id"
          >
            <el-select placeholder="请选择" v-model="sale.saleIdAndSaleValueId">
              <el-option
                :label="saleValue.saleAttrValueName"
                :value="`${sale.id}:${saleValue.id}`"
                v-for="(saleValue, index) in sale.spuSaleAttrValueList"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table border style="width: 100%" :data="spuImageList"  @selection-change="handleSelectionChange">
          <el-table-column
            prop="date"
            type="selection"
            width="80"
          ></el-table-column>
          <el-table-column prop="date" label="图片" width="width">
            <template slot-scope="{ row, $index }">
              <img :src="row.imgUrl" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column
            prop="imgName"
            label="名称"
            width="width"
          ></el-table-column>
          <el-table-column label="操作" width="width"> 
            <template slot-scope="{row,$index}">
                <el-button type="primary" v-if="row.isDefault===0" @click="setDefault(row)">设置为默认</el-button>
                <el-button type="success" plain v-else>默认</el-button> 
            </template>
            
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveSku">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      spu: {},
      spuImageList: [], //图片数据
      saleAttrList: [], //销售属性数据
      attrInfoList: [], //平台属性数据
      skuInfo: {
        //三级分类的id
        category3Id: 0,
        price: 0,
        skuAttrValueList: [

        ],
        skuDefaultImg: "",
        skuDesc: "",
        skuImageList: [
          
        ],
        skuName: "",
        skuSaleAttrValueList: [
          
        ],
        //
        spuId: 0,
        tmId: 0,
        weight: "",
      }, //收集sku数据
      imageList:[],//收集勾选的图片数据
    };
  },
  methods: {
    async getData(category1Id, category2Id, spu) {
      this.skuInfo.category3Id = spu.category3Id;
      this.skuInfo.spuId = spu.id;
      this.spu = spu;

      //获取图片数据
      let result = await this.$API.spu.reqSpuImageList(spu.id);
      if (result.code === 200) {
        let list=result.data
        list.forEach(item => {
            item.isDefault=0
        });
        this.spuImageList = list;
      }
      //获取销售属性的数据
      let result1 = await this.$API.spu.reqSpuSaleAttrList(spu.id);
      if (result1.code === 200) {
        this.saleAttrList = result1.data;
      }

      //获取平台属性数据
      let result2 = await this.$API.spu.reqAttrInfoList(
        category1Id,
        category2Id,
        spu.category3Id
      );
      if (result2.code === 200) {
        this.attrInfoList = result2.data;
      }
    },
    //当选框发生变化时,勾选图片的数据
    handleSelectionChange(val){
        this.imageList=val
    },
    //设置默认
    setDefault(row){
        this.spuImageList.forEach(item=>{
            item.isDefault=0
        })

        row.isDefault=1
        this.skuInfo.skuDefaultImg=row.imgUrl
    },
    //保存sku
    async saveSku(){
      const {attrInfoList,skuInfo,saleAttrList,imageList} = this;
      //整理平台属的数据
     skuInfo.skuAttrValueList = attrInfoList.reduce((prev,item)=>{
         if(item.attrIdAndValueId){
           const [attrId,valueId]  = item.attrIdAndValueId.split(":");
            prev.push({attrId,valueId});
         }
         return prev;
      },[]);
      //整理销售属性
     skuInfo.skuSaleAttrValueList = saleAttrList.reduce((prev,item)=>{
         if(item.attrIdAndValueId){
           const [saleAttrId,saleAttrValueId] = item.attrIdAndValueId.split(':');
           prev.push({saleAttrId,saleAttrValueId});
         }
         return prev;
      },[]);
     //整理图片的数据
     skuInfo.skuImageList = imageList.map(item=>{
         return {
           imgName:item.imgName,
           imgUrl:item.imgUrl,
           isDefault:item.isDefault,
           spuImgId:item.id,
         }
     });
     //发送请求
      let result = await this.$API.spu.reqAddSku(skuInfo)
      if (result.code===200) {
        this.$message({type:'success',message:'添加SKU成功'})
        this.cancel()
      }
    },
    //取消
    cancel(){
      //自定义事件，让父组件切换场景0
      this.$emit('changeScene',0);
      //清除数据
      Object.assign(this._data,this.$options.data());
    }
  },
};
</script>
